<template>
  <div class="xeUtils" style="margin:0 auto;padding-left:50px;padding-top:50px">
    <el-button @click="nanoidFn">切换nanoid</el-button>
    <div>{{nanoid}}</div>
  </div>
</template>

<script>
import Vue from "vue";
import XEUtils from "xe-utils";
import { nanoid } from "nanoid";
export default {
  data() {
    return {
      nanoid: "",
      treeData: [
        {
          id: 1
        },
        {
          id: 2,
          childs: [
            {
              id: 20
            }
          ]
        },
        {
          id: 3,
          childs: [
            {
              id: 30,
              name: "zkx"
            }
          ]
        }
      ]
    };
  },
  methods: {
    //处理树
    handleTree() {
      this.treeData = this.$utils.mapTree(this.treeData, item => {
        return {
          ...item,
          children: item.childs
        };
      });
      console.log(this.treeData);
    },
    //搜索树
    searchTree() {
      let name = "zkx";
      let arr = [];
      this.$utils.eachTree(this.treeData, item => {
        if (item.name == name) {
          arr.push(item.id);
          return;
        }
      });
      console.log(arr);
    },
    nanoidFn() {
      this.nanoid = nanoid();
    }
  },
  mounted() {
    this.handleTree();
    this.searchTree();
    this.nanoidFn();
    // console.log(nanoid());
  }
};
</script>

<style>
</style>
